<template>
  <el-dialog v-model="dialogVisible" title="供货日志" width="1200" overflow>
    <vxe-table
      border
      min-height="300"
      :column-config="{ resizable: true }"
      :row-config="{ isHover: true }"
      :data="TableData"
      size="small"
    >
      <vxe-column
        field="bizCode"
        title="材料编号"
        width="120"
        show-header-overflow
        show-overflow="title"
        show-footer-overflow
      />
      <vxe-column
        field="bizName"
        title="材料名称"
        width="120"
        show-header-overflow
        show-overflow="title"
        show-footer-overflow
      />
      <vxe-column
        field="bizSpecs"
        title="规格"
        width="120"
        show-header-overflow
        show-overflow="title"
        show-footer-overflow
      />
      <vxe-column
        field="bizModel"
        title="型号"
        width="150"
        show-header-overflow
        show-overflow="title"
        show-footer-overflow
      />
      <vxe-column
        field="bizField"
        title="变更项"
        width="120"
        show-header-overflow
        show-overflow="title"
        show-footer-overflow
      />
      <vxe-column
        field="bizStartVal"
        title="变更前"
        width="120"
        show-header-overflow
        show-overflow="title"
        show-footer-overflow
      />
      <vxe-column
        field="bizEndVal"
        title="变更后"
        width="120"
        show-header-overflow
        show-overflow="title"
        show-footer-overflow
      />
      <vxe-column
        field="createdByName"
        title="修改人"
        width="120"
        show-header-overflow
        show-overflow="title"
        show-footer-overflow
      />
      <vxe-column
        field="createdAt"
        title="修改时间"
        show-header-overflow
        show-overflow="title"
        show-footer-overflow
      />
    </vxe-table>
    <template #footer>
      <div class="dialog-footer">
        <el-button
          type="primary"
          color="#1E3485"
          @click="dialogVisible = false"
        >
          保存
        </el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { reactive, ref, watch, onMounted } from "vue";

// 弹窗关闭/打开事件
const props = defineProps({
  visible: Boolean
});

const dialogVisible = ref(false);
//const formLabelWidth = "140px";

const TableData = ref([]);
watch(
  () => props.visible,
  val => {
    dialogVisible.value = val;
  },
  { immediate: true }
);
</script>
